<template>
    <div class="component-picker-date">
        <input
            type="text"
            class="component-picker-date__input"
            :id='pickerId' 
            :placeholder="placeholder" 
            :value='value'>
        <slot></slot>
        <span class="component-picker-date__clear iconfont icon-close-pure" @click.stop='clearCheck'></span>
    </div>
</template>

<script>
    import '../libs/mobiscroll/css/mobiscroll.javascript.min.css'
    import { mobiscroll } from '../libs/mobiscroll/js/mobiscroll.javascript.min.js'
    import  { mapGetters, mapActions }  from 'vuex'
    import moment from 'moment'

    export default {
        props:{
            value:[Array,Object,String,Number,Boolean],
            text:[String,Number],
            pickerId:{
                type: String,
                default: 'picker-id'
            },
            placeholder:{
                type: String,
                default:'请选择'
            },
            minDate:{
                type: [String,Object],
                default:''
            },
            maxDate:{
                type: [String,Number],
                default:''
            },
            time:{
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                show_options:false,
                selectText:'',
                topPos:'',
                zIndex:1,
                scrollerInit:'',
            }
        },
        computed:{
            ...mapGetters([
                'localInfo'
            ]),
            styleOptions(){
                let object = {}
                if(this.maxHeight){
                    object.maxHeight = `${this.maxHeight}px`
                }
                if(this.topPos){
                    object.top = `${this.topPos}px`
                }
                return object
            },
            documentClickBoolean(){
                return this.localInfo.documentClick
            },
            selectZIndex(){
                return this.localInfo.selectZIndex
            },
            zIndexStyle(){
                return {zIndex:this.zIndex}
            },
            controls(){
                if(this.time) return ['calendar', 'time']
                return ['calendar']
            }
        },
        methods:{
            ...mapActions([
                'setDocumentClick',
                'setSelectZIndex',
            ]),
            clearCheck() {
                this.$emit('input', '')
            },
        },
        mounted() {

            let now = new Date();
            let minDate

            if(this.minDate){
                minDate = this.minDate.toDate()
            }
            
            let maxDate
            if(!this.maxDate){
                // maxDate = new Date(now.getFullYear(), now.getMonth(), now.getDate()+30);
            }
            else{
                // maxDate = moment().add(this.maxDate, 'days').toDate()
            }
            // console.log(maxDate)
            let self = this
            this.$nextTick(()=> {
                this.scrollerInit = mobiscroll.calendar(`#${this.pickerId}`, {
                    theme:'material',
                    lang: 'zh',
                    display: 'center',
                    dateFormat:'yy-mm-dd',
                    min:minDate,
                    max:maxDate,
                    controls: this.controls,
                    timeFormat:'HH:ii:ss',
                    onSet(event, inst) {
                        console.log(event)
                        let value = event.valueText
                        self.$emit('input',value)
                        self.$emit('done')
                    },
                })
            })
        },
        destroyed(){
            this.scrollerInit.destroy()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    .component-picker-date{
        display: flex;
        width: 100%;
        position: relative;
        align-items:center;
        box-sizing:border-box;
    }
    .component-picker-date__input{
        width: 100%;
        box-sizing: border-box;
    }
    .component-picker-date__clear{
        cursor:pointer;
        position: absolute;
        right:8px;
        top:50%;
        font-size: 13px;
        margin-top:-6.5px;
        line-height: 1;
        color:red;
        &:hover{
            color:blue;
        }
    }
</style>


